<!--
 * @Date: 2023-12-13 17:33:43
 * @LastEditTime: 2023-12-21 14:58:16
 * @Description: content
-->
<template>
  <view class="content">
    <uni-nav-bar
      title="发布集市"
      color="#fff"
      leftIcon="left"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back()"
    ></uni-nav-bar>

    <view class="row">
      <view class="left">
        <view class="title-color">待发布商品</view>

        <view class="desc">
          ({{ (pageData && pageData.orderlist_total) || 0 }}件商品)
        </view>
      </view>
    </view>

    <scroll-view v-if="pageData" class="prize-list" scroll-x>
      <view class="list-wrap">
        <view
          class="prize-item"
          v-for="(item, i) in pageData.orderlist"
          :key="i"
        >
          <view class="pic">
            <image :src="item.goodslist_imgurl" lazy-load></image>

            <view v-if="item.shang_title" class="type">
              {{ item.shang_title }}
            </view>

            <view class="num">×{{ item.prize_num }}</view>
          </view>

          <view class="title hang1">
            {{ item.goodslist_title }}
          </view>

          <view class="price">参考价¥{{ item.goodslist_money }}/个</view>
        </view>
      </view>
    </scroll-view>

    <view class="row">
      <view class="left">
        <view class="title-color">一口价</view>

        <view class="desc">
          (建议一口价¥{{ (pageData && pageData.orderlist_total_money) || 0 }})
        </view>
      </view>
    </view>

    <view class="input-box">
      <input v-model.number="salePrice" placeholder="输入您想卖的价格" />
    </view>

    <view class="tip">低于建议一口价挂售或单品挂售更快成交哦</view>

    <!-- <view class="row">
      <view class="left">
        <view class="title-color">价格明细</view>
      </view>

      <view class="right">
        <view class="to-rule">查看收费标准</view>

        <view class="right-icon icon">
          <image :src="$img('/static/img/right3.png')" lazy-load></image>
        </view>
      </view>
    </view>

    <view class="row">
      <view class="left">一口价</view>

      <view class="right">¥233.33</view>
    </view> -->

    <!-- <view class="row">
      <view class="left">支付手续费:4*233.3%</view>

      <view class="right">-¥233.33</view>
    </view> -->

    <!-- <view class="get-money">
      预估收益:
      <text>
        ¥
        <text>23.33</text>
      </text>
    </view> -->

    <view class="row">
      <view class="left">
        <view class="title-color">收款方式</view>
      </view>

      <view class="right">
        <view class="type">
          <view class="check icon">
            <image
              v-if="true"
              :src="$img('/static/img/check1_act.png')"
              lazy-load
            ></image>

            <image
              v-else
              :src="$img('/static/img/check1.png')"
              lazy-load
            ></image>
          </view>

          账户余额收款
        </view>
      </view>
    </view>

    <view class="rule-card">
      <view class="rule-title">友情提示</view>

      <scroll-view class="rule-text" scroll-y>
        <view v-html="ruleData"></view>
      </scroll-view>
    </view>

    <view class="submit-btn" @click="$c.noDouble(submitMarket)">立即发布</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      optData: '',
      salePrice: '',
      pageData: '',
      ruleData: ''
    }
  },

  onLoad(options) {
    const ids = uni.getStorageSync('_market_ids')

    if (ids) {
      this.optData = ids
      uni.removeStorageSync('_market_ids')
    }

    this.getData()

    this.$c.getRule(17).then(res => {
      // console.log(res)
      this.ruleData = res.data
    })
  },

  methods: {
    submitMarket() {
      if (!this.salePrice) {
        this.$c.toast({
          title: '请输入价格'
        })
        return
      }

      this.req({
        url: 'market_fa',
        data: {
          order_list_ids: this.optData.join(','),
          price: this.salePrice
        },
        success: res => {
          if (res.status == 1) {
            this.$c.toast({
              title: res.msg,
              duration: 500,
              success: () => {
                this.$c.back()
              }
            })
          }
        }
      })
    },

    /**
     * @description: 获取数据
     * @return {*}
     */
    getData() {
      this.req({
        url: 'js_market_price',
        data: {
          order_list_ids: this.optData.join(',')
        },
        success: res => {
          if (res.status == 1) {
            this.pageData = res.data
            this.salePrice = res.data.orderlist_total_money
          }

          if (res.status == 0) {
            this.$c.back()
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 30rpx 150rpx;

  image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  .icon {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30rpx;

    .left {
      display: flex;
      align-items: center;

      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;

      .title-color {
        font-size: 32rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: transparent;

        background: linear-gradient(
          90deg,
          #6adeff 0%,
          #7ab5ff 50%,
          #ff7feb 100%
        );
        background-clip: text;
      }

      .desc {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #dddddd;
      }
    }

    .right {
      display: flex;
      align-items: center;

      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;

      .to-rule {
        font-size: 24rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #d0d1ff;
      }

      .right-icon {
        width: 32rpx;
        height: 32rpx;
      }

      .type {
        display: flex;
        align-items: center;

        .check {
          width: 40rpx;
          height: 32rpx;
          margin-right: 10rpx;
        }

        font-size: 28rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }

  .prize-list {
    margin-top: 30rpx;

    .list-wrap {
      display: inline-flex;

      .prize-item {
        width: 170rpx;
        margin-left: 20rpx;

        &:first-child {
          margin-left: 0;
        }

        .pic {
          width: 100%;
          height: 170rpx;
          border: 1px solid;
          border-image: linear-gradient(90deg, #2dcbff, #ff95fb) 1 1;
          box-sizing: border-box;
          position: relative;

          .type {
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 2;
            height: 32rpx;
            background: linear-gradient(
              90deg,
              #6adeff 0%,
              #7ab5ff 50%,
              #ff7feb 100%
            );
            padding: 0 10rpx;
            display: flex;
            align-items: center;

            font-size: 20rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #222222;
          }

          .num {
            width: 100%;
            box-sizing: border-box;
            padding-left: 0 10rpx;
            position: absolute;
            left: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: flex-end;
            align-items: center;

            font-size: 24rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
          }
        }

        .title {
          margin-top: 10rpx;

          font-size: 26rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }
        .hang1 {
        }
        .price {
          margin-top: 6rpx;

          font-size: 20rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #cccccc;
        }
      }
    }
  }
  .row {
    .left {
      .title-color {
      }
      .desc {
      }
    }
  }

  .input-box {
    margin-top: 30rpx;
    height: 80rpx;
    border: 1px solid #d0d1ff;
    box-sizing: border-box;
    padding: 0 20rpx;
    display: flex;
    align-items: center;

    input {
      flex: 1;

      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #fff;
    }
  }

  .tip {
    margin-top: 10rpx;

    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #dddddd;
  }
  .row {
    .left {
      .title-color {
      }
    }
    .right {
      .to-rule {
      }
      .right-icon {
      }
      .icon {
      }
    }
  }
  .row {
    .left {
    }
    .right {
    }
  }
  .row {
    .left {
    }
    .right {
    }
  }

  .get-money {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: 30rpx;

    font-size: 28rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;

    text {
      color: #d0d1ff;
      font-size: 24rpx;

      text {
        font-size: 36rpx;
      }
    }
  }
  .row {
    .left {
      .title-color {
      }
    }
    .right {
      .type {
        .check {
        }
        .icon {
        }
      }
    }
  }

  .rule-card {
    margin-top: 40rpx;
    background: rgba(208, 209, 255, 0.1);
    padding: 30rpx;

    .rule-title {
      font-size: 32rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }

    .rule-text {
      margin-top: 20rpx;
      max-height: 150rpx;

      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #dddddd;
    }
  }

  .submit-btn {
    position: fixed;
    z-index: 10;
    left: 30rpx;
    bottom: 30rpx;
    width: 690rpx;
    height: 90rpx;
    background: linear-gradient(90deg, #2dcbff 0%, #ff95fb 100%);
    border-radius: 45rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 32rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
